---
image: /generated/articles-docs-player-player-integration.png
id: integration
title: 'Code sharing'
crumb: '@remotion/player'
---

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

If you are using the player, a common desire is to share the code with your Remotion Studio and/or server-side rendering. With the correct setup, you can write the component once and use it for previewing, displaying and rendering.

:::note
Remotion and your React app use a different Webpack config. Therefore, if you want to override your [Webpack configuration](/docs/webpack), you need to override both the Remotion one and the React app one.
:::

## Template

Use one of our starter templates:

- [Next.js (App dir)](/templates/next)
- [Next.js (App dir + TailwindCSS)](/templates/next-tailwind)
- [Next.js (Pages dir)](/templates/next-pages-dir)
- [React Router 7 (Remix)](/templates/react-router)

which have the Player and Lambda already set up.

## Manual setup

Set up a React project with your preferred setup from the [Official React docs](https://react.dev/learn/start-a-new-react-project). Popular choices are:

- [Next.js](https://nextjs.org/learn/basics/create-nextjs-app/setup)
- [React Router](https://reactrouter.com/start/framework/installation)
- [Vite](https://vitejs.dev/guide/)

:::note
While you can still use [Create React App](https://create-react-app.dev), it is not being actively recommended by the React team anymore.
:::

When your project is setup, add the necessary Remotion dependencies:

<Tabs
defaultValue="npm"
values={[
{ label: 'npm', value: 'npm', },
{ label: 'yarn', value: 'yarn', },
{ label: 'pnpm', value: 'pnpm', },
]
}>
<TabItem value="npm">

```bash
npm i remotion @remotion/cli @remotion/player
```

  </TabItem>

  <TabItem value="pnpm">

```bash
pnpm i remotion @remotion/cli @remotion/player
```

  </TabItem>
  <TabItem value="yarn">

```bash
yarn add remotion @remotion/cli @remotion/player
```

  </TabItem>
</Tabs>

Afterwards, create a subfolder for Remotion within your project and add three files: An index file, a `Root.tsx` file for your list of compositions, and a file with your composition. It could look like this:

```diff
 └── src/
+  ├── remotion/
+  │   ├── index.ts
+  │   ├── MyComp.tsx
+  │   └── Root.tsx
   └── app/
       └── App.tsx
```

Your composition (`remotion/MyComp.tsx` in the example) could look for example like this:

```tsx twoslash
export const MyComp: React.FC<{text: string}> = ({text}) => {
  return <div>Hello {text}!</div>;
};
```

Your list of videos (`remotion/Root.tsx` in the example) could look like this:

```tsx twoslash
// @allowUmdGlobalAccess
// @filename: ./MyComp.tsx
export const MyComp = () => <></>;

// @filename: index.tsx
// ---cut---
import {Composition} from 'remotion';
import {MyComp} from './MyComp';

export const MyVideo = () => {
  return (
    <>
      <Composition component={MyComp} durationInFrames={120} width={1920} height={1080} fps={30} id="my-comp" defaultProps={{text: 'World'}} />
    </>
  );
};
```

Your index file (`remotion/index.ts` in the example) could look like this:

```tsx twoslash
// @filename: ./Root.tsx
export const MyVideo: React.FC<{text: string}> = () => <></>;

// ---cut---
import {registerRoot} from 'remotion';
import {MyVideo} from './Video';

registerRoot(MyVideo);
```

:::tip
Don't move these statements together into one file, as you might break hot reloading.
:::

## Using the Remotion Studio

You can open the Remotion Studio using the `npx remotion studio` command:

```bash
npx remotion studio src/remotion/index.ts
```

:::note
Before v4.0, the command was `npx remotion preview`.
:::

We recommend adding a new script into your package.json for easy access:

```diff
  "scripts": {
+    "remotion": "remotion studio src/remotion/index.ts"
  }
```

## Adding `<Player />` to your app

Anywhere in your app, import the [`<Player />`](/docs/player) component and your Composition component.

```tsx twoslash
// @allowUmdGlobalAccess
// @filename: ./remotion/MyComp.tsx
export const MyComp = () => <></>;

// @filename: index.tsx
// ---cut---
import {Player} from '@remotion/player';
import {MyComp} from './remotion/MyComp';

export const App: React.FC = () => {
  return (
    <Player
      component={MyComp}
      inputProps={{text: 'World'}}
      durationInFrames={120}
      compositionWidth={1920}
      compositionHeight={1080}
      fps={30}
      style={{
        width: 1280,
        height: 720,
      }}
      controls
    />
  );
};
```

:::note
Pass your React component directly to the `component` prop. Don't pass the list of compositions.
:::

If everything worked, you can now run your webapp and preview your video.

## Creating a bundle for server-side rendering

In any Node.JS context, you can call [`bundle()`](/docs/bundle) to bundle your video using Webpack and to server-side render the video. You need to add `@remotion/bundler` to your package.json for this.

```ts twoslash title="server.tsx"
import path from 'path';
import {bundle} from '@remotion/bundler';

const bundled = await bundle(path.join(process.cwd(), 'src', 'remotion', 'index.ts'));
```

See [Server-side rendering](/docs/ssr) for a full example.

:::tip
When using Lambda, you don't need this, you can use the CLI or [`deploySite()`](/docs/lambda/deploysite) which will bundle the video for you.
:::

## See also

- [`<Player />`](/docs/player)
